<template>
  <div class="addInternetChannelSkillGroup" v-if="isShowThis" v-loading="loading">
    <div class="skill-name pb20"><p style="margin-bottom:5px;">{{$t('monitor.skillGroupName')}}</p><el-input v-model.trim="DisplayName" :placeholder="$t('public.pleaseEnter')"></el-input></div>
    <div class="assign-rule pb20">
      <p style="margin-bottom:5px;">{{$t('configLazyLoad.channel.assignStrate')}}</p>
      <el-select size="mini" v-model="assignRule" :placeholder="$t('public.pleasePick')">
        <el-option
          v-for="item in agentAssignResult"
          :label="item.label"
          :value="item.value">
        </el-option>
      </el-select>
    </div>
    <div class="ismemory pb20">
      <p style="margin-bottom:5px;">{{$t('configLazyLoad.channel.useMemory')}}
        <questionToolTip :tipContent="$t('configLazyLoad.channel.memoryTip')"></questionToolTip>
      </p>
      <el-radio-group v-model="IsMemory">
        <el-radio class="radio" :label="true">{{$t('public.yes')}}</el-radio>
        <el-radio class="radio" :label="false">{{$t('public.no')}}</el-radio>
      </el-radio-group>
    </div>
    <div class="memory_time pb20" v-if="IsMemory">
      <p style="margin-bottom:5px;">{{$t('configLazyLoad.channel.chooseMemoryTime')}}
        <questionToolTip :tipContent="$t('configLazyLoad.channel.memoryTip2')"></questionToolTip>
      </p>
      <el-radio-group v-model="MemoryTime">
        <el-radio class="radio" label="120">{{$t('configLazyLoad.channel.memoryTime1')}}</el-radio>
        <el-radio class="radio" label="1440">{{$t('configLazyLoad.channel.memoryTime2')}}</el-radio>
        <el-radio class="radio" label="10080">{{$t('configLazyLoad.channel.memoryTime3')}}</el-radio>
        <el-radio class="radio" label="43200">{{$t('configLazyLoad.channel.memoryTime4')}}</el-radio>
      </el-radio-group>
    </div>
    <div class="tishi pb20">{{$t('configLazyLoad.channel.internetChannelTip3')}}</div>
    <AgentAssign :openBatch="true" ref="agentAssign" :forChannelConfig="true" :checkedAgentsOfChannelConfig="AssignMembersArr" @assign-change="handleAssignChange"></AgentAssign>
    
    <div style="text-align: center">
      <el-button class="primary_btn" @click="cancel">{{$t('public.cancel')}}</el-button>
      <el-button type="primary" class="primary_btn" @click="submit">{{$t('public.save')}}</el-button>
    </div>
  </div>
</template>
<script>
  import AgentAssign from '@/components/public-modules/agent-assign/AgentAssign.vue'
  import questionToolTip from '@/components/ui-modules/questionToolTip/QuestionToolTip.vue'
  export default {
    name: 'addInternetChannelSkillGroup',
    data () {
      return {
        agents: [],
        isShowThis: false,
        loading: false,
        DisplayName: this.skillInfo.DisplayName || '',
        assignRule: this.skillInfo.AssignRule || 'random',
        IsMemory: this.skillInfo.IsMemory || false,
        MemoryTime: this.skillInfo.MemoryTime || '120',
        AssignMembers: this.skillInfo.AssignMembers || [],
        agentAssignResult: [{
          value: 'queue',
          label: this.$t('callServiceSkillGroup.callServiceSkillGroup22')
        }, {
          value: 'random',
          label: this.$t('callServiceSkillGroup.callServiceSkillGroup23')
        }, {
          value: 'least',
          label: this.$t('configLazyLoad.channel.least')
        }, {
          value: 'priority',
          label: this.$t('configLazyLoad.channel.priority')
        }],
        MemberToken: []
      }
    },
    props: {
      skillInfo: {
        type: Object,
        default: {}
      }
    },
    methods: {
      cancel () {
        this.$emit('back')
      },
      submit () {
        let data = {}
        data.assignRule = this.assignRule
        data.DisplayName = this.DisplayName
        if (!data.DisplayName) {
          this.$message.error(this.$t('configLazyLoad.channel.groupError1'))
          return
        }
        if (this.skillInfo._id) {
          data.id = this.skillInfo._id
        }
        data.MemberToken = JSON.stringify(this.MemberToken)
        if (data.MemberToken === '[]') {
          this.$confirm(this.$t('configLazyLoad.channel.memoryTip3'), this.$t('public.tip'), {
            confirmButtonText: this.$t('public.confirm'),
            cancelButtonText: this.$t('public.cancel'),
            cancelButtonClass: 'primary_btn',
            confirmButtonClass: 'primary_btn',
            type: 'warning'
          }).then(() => {
            this.getThenAction(data)
          }).catch(() => {
            console.log('取消')
          })
          return false
        }
        this.getThenAction(data)
      },
      getThenAction (data) {
        data.IsMemory = !!this.IsMemory
        data.Timeout = '40'
        data.WaitCount = '3'
        data.Joinempty = 'yes'
        data.Strategy = 'rrmemory'
        data.MemoryTime = this.MemoryTime
        data.ToPeerWhenQueueEmpty = '0'
        data.Type = 'im'
        console.log(data)
        this.loading = true
        if (this.skillInfo._id) {
          data.Exten = this.skillInfo.Exten
          this.$store.dispatch('addOrUpdateEmailQueueForSkill', data).then((res) => {
            this.loading = false
            if (res.success) {
              this.$emit('refresh')
              this.$store.dispatch('refreshCacheFromDb', {type: 'mailQueues'})
            }
          })
        } else {
          this.$store.dispatch('getFreeQueueNoForSkill', null).then((res) => {
            if (res.success) {
              data.Exten = res.num
              this.$store.dispatch('addOrUpdateEmailQueueForSkill', data).then((res) => {
                this.loading = false
                if (res.success) {
                  this.$emit('refresh')
                  this.$store.dispatch('refreshCacheFromDb', {type: 'mailQueues'})
                }
              })
            } else {
              //            this.$message.error('获取技能组号失败')
              this.loading = false
            }
          })
        }
      },
      handleAssignChange (agentCount) {
        let agentCounts = agentCount
        this.MemberToken = []
        agentCounts.forEach(item => {
          this.MemberToken.push(item.agent + ':' + item.count)
        })
      }
    },
    components: {
      AgentAssign,
      questionToolTip
    },
    watch: {
      skillInfo () {
        this.DisplayName = this.skillInfo.DisplayName || ''
        this.assignRule = this.skillInfo.AssignRule || 'random'
        this.IsMemory = this.skillInfo.IsMemory || false
        this.MemoryTime = this.skillInfo.MemoryTime || '120'
        this.AssignMembers = this.skillInfo.AssignMembers || []
      }
    },
    computed: {
      AssignMembersArr () {
        let agentArr = []
        let agents = this.$store.getters.agents
        this.AssignMembers.forEach(one => {
          if (agents[one.agentID]) {
            agentArr.push({_id: agents[one.agentID]._id, displayName: agents[one.agentID].displayName, exten: agents[one.agentID].exten, count: one.penalty})
          }
        })
        return agentArr
      }
    },
    beforeMount () {
//      this.$store.dispatch('getCache', { type: 'agents' }).then(() => {
//        this.agents = this.$getCache('agents')
      this.isShowThis = true
//      })
    }
  }
</script>
<style lang="stylus">
.addInternetChannelSkillGroup
  .assign
    .selecSate
      padding 0
      .scResult
        padding-left 0
        .result
          .el-input
            width 50px
</style>
<style lang="stylus" scoped>
  @import "../../../../../../assets/common.styl"
  .addInternetChannelSkillGroup
    box-sizing border-box
    max-height calc(100vh - 248px)
    overflow-y auto
    padding 20px
    .el-input,.el-select
      width 220px
    .skill-name,.assign-rule
      float left
    .skill-name
      margin-right 30px
    .ismemory
      clear both
    .pb20
      padding-bottom 20px
    .tishi
      color $c-prompt
    .tip
      cursor pointer
      display inline-block
      height 16px
      width 16px
      border 1px solid $c-main
      text-align center
      line-height 16px
      border-radius 50%
      margin-left 2px
      .iconfont
        font-size 10px
        color $c-main
</style>
